<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>

    <!--如果要做 spa,指的是在一个页面完成所有的功能，那么就是要在用户点击不同的功能的时候，做功能的切换。
    1. 可以考虑使用 ajax 实现，ajax就是完成局部的更新
        ajax 不能做历史记录，不能前进后退

    2. 基于锚点实现，因为锚点可以做到页面不刷新时候，展示对应的锚点信息。
        锚点具有历史功能，可以前进后退

    -->

    <li><a href="#ep1">第一章 美猴王出身</a></li>
    <li><a href="#ep2">第二章 东海学艺</a></li>
    <li><a href="#ep3">第三章 大战牛魔王</a></li>
    <li><a href="#ep4">第四章 大闹天宫</a></li>
    <li><a href="#ep5">第五章 被压五指山</a></li>
</ul>


<div id="container">
<!--根据hash来展示与之对应的内容-->

</div>

</body>
<script type="text/javascript">
    /*浏览器提供了一个事件可以监控 hash 值的变化*/
    window.onhashchange = function () {
        // bom 编程 location
        console.log(location.hash);
        let hash = location.hash;
        let html = ``;

        /* 路由隐射表 url地址和对应页面的展示关系
        http://localhost:9080/codes/14/01-hash-spa/02-spa%E7%9A%84%E5%BA%95%E5%B1%82%E5%AE%9E%E7%8E%B0.html?#ep1
            #ep1 --石猴出身
            #ep2 -- 拜师学艺*/
        if(hash == '#ep1'){
            // 展示第一个功能 展示美猴王出身
            html  = `
                <h2>石猴诞生了</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda eveniet quia quos rem voluptate! Atque cupiditate dolore et iusto nisi porro, tempore vitae. A alias dignissimos dolore id perspiciatis quas quia quis reiciendis rem reprehenderit repudiandae tenetur, unde, voluptate? Ab accusantium earum iure, labore magni pariatur. Alias aliquid animi aspernatur, consectetur debitis ea earum eius eligendi excepturi facere illum ipsam maxime, minus nesciunt non obcaecati omnis quas quia reprehenderit sapiente similique sit suscipit vero! Accusantium ad alias atque blanditiis dolorem hic illum. Dolorem ducimus est fugiat mollitia obcaecati praesentium similique? Adipisci asperiores, eius fugit incidunt molestias perspiciatis quia repellat ut?</p>
            `

        }else if(hash == '#ep2'){
            html  = `
                <h2>东海拜师学艺</h2>
                <p> 菩提老祖 Lorem ipsum  ut?</p>
                <p> 菩提老祖 Lorem ipsum  ut?</p>
                <p> 菩提老祖 Lorem ipsum  ut?</p>
                <p> 菩提老祖 Lorem ipsum  ut?</p>
                <p> 菩提老祖 Lorem ipsum  ut?</p>
            `
        }

        document.getElementById('container').innerHTML = html;
    }
</script>

</html>
